$(function () {
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    //第一类
    var wxb = [
        {name: '市网信办', value: 200, id: '11111'},
    ];
    var data = [
        {name: '市网信办', value: 200, id: '11111'},
        {name: '市民之家', value: 100, id: '11111'},
        {name: '司法局', value: 350, id: '11111'},
        {name: '民政局', value: 200, id: '11111'},
        {name: '公安局', value: 270, id: '11111'},
        {name: '财政局', value: 80, id: '11111'},
        {name: '发改委', value: 300, id: '11111'},
        {name: '新洲', value: 1000, id: '11111'},
    ];
    var geoCoordMap = {
        '市网信办': [114.307802, 30.59029],
        '市民之家': [114.301452, 30.664414],
        '司法局': [114.288321, 30.628334],
        '民政局': [114.29279, 30.60523],
        '公安局': [114.264848, 30.620543],
        '财政局': [114.297577, 30.599059],
        '发改委': [114.349466, 30.547559],
        '新洲': [114.807756, 30.847308],
    };

    //飞线

    //有箭头
    var line = [
        {
            fromName: '市网信办',
            toName: '公安局',
            coords: [[114.307802, 30.59029], [114.264848, 30.620543]]
        },
        {
            fromName: '市网信办',
            toName: '司法局',
            coords: [[114.307802, 30.59029], [114.288321, 30.628334]]
        },
        {
            fromName: '公安局',
            toName: '市网信办',
            coords: [[114.264848, 30.620543], [114.307802, 30.59029]]
        },
        {
            fromName: '发改委',
            toName: '市网信办',
            coords: [[114.349466, 30.547559], [114.307802, 30.59029]]
        },
        {
            fromName: '市网信办',
            toName: '新洲',
            coords: [[114.307802, 30.59029], [114.807756, 30.847308]]
        },
    ];
    //无箭头
    var lineno = [
        {
            fromName: '市网信办',
            toName: '市民之家',
            coords: [[114.307802, 30.59029], [114.301452, 30.664414]]
        },
        {
            fromName: '市网信办',
            toName: '财政局',
            coords: [[114.307802, 30.59029], [114.297577, 30.599059]]
        },
        {
            fromName: '市网信办',
            toName: '民政局',
            coords: [[114.307802, 30.59029], [114.29279, 30.60523]]
        },
    ];


    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                    id: data[i].id
                });
            }
        }
        return res;
    };

    var series = [];

    series.push(
        {
            name: '',
            type: 'scatter',
            coordinateSystem: 'bmap',
            symbol: 'pin',
//          symbol: 'image://images/img1.png',
            symbolSize: 40,
            zlevel: 30,
            animation: true,
            itemStyle: {
                normal: {
                    color: 'rgba(0,0,0,0)',
                    label: {
                        show: true,
                        formatter: function (params) {
                            // params.name = params.name.substr(0, 1)
                            params.name = '';
                            return params.name;
                        },
                        color: '#358294',
                        fontWeight: 'bolder',
                        fontSize: '14',
                        backgroundColor: 'rgba(0,0,0,1)'
                    }
                },
            },
            data: convertData(data)
        },
        {
            coordinateSystem: 'bmap',
            type: 'lines',
            polyline: true,
            zlevel: 1,
            effect: {
                show: true,
                constantSpeed: 100,
                trailLength: 0.01,
                symbolSize: 4,
                symbol: 'circle',
                loop: true
            },
            lineStyle: {
                normal: {
                    color: '#02fffc',
                    opacity: 0,
                    curveness: 0
                }
            },
            data: line
        },
        {
            coordinateSystem: 'bmap',
            type: 'lines',
            polyline: true,
            zlevel: 1,
            effect: {
                show: true,
                constantSpeed: 100,
                trailLength: 0.01,
                symbolSize: 4,
                symbol: 'circle',
                loop: true
            },
            lineStyle: {
                normal: {
                    color: '#02fffc',
                    opacity: 0,
                    curveness: 0
                }
            },
            data: lineno
        },
        /*到达点*/
        {
            name: '',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            rippleEffect: {
                period: 4, brushType: 'fill', scale: 3
            },
            zlevel: 15,
            tooltip: {
                show: true,
            },
            symbol: 'circle',
            symbolSize: function (params) {
                var num = params[2] / 100 * 4;
                return num;
            },
            selectedMode: 'multiple',
            itemStyle: {
                normal: {
                    color: '#02fffc'
                },
                emphasis: {
                    show: true,
//                    color:'red'
                }
            },
            data: convertData(data),

        },
        {
            name: '',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            rippleEffect: {
                period: 4, brushType: 'fill', scale: 4
            },
            zlevel: 15,
            tooltip: {
                show: false,
            },
            symbol: 'circle',
            symbolSize: function (params) {
                var num = params[2] / 100 * 4;
                return num;
            },
            itemStyle: {
                normal: {
                    color: 'red'
                }
            },
            data: convertData(wxb),

        }
    );




    option = {
        // backgroundColor: '#404a59',
        title: {
            text: '',
            subtext: '',
            sublink: '',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'item'
        },
        formatter: function (prama) {
            return prama.name;
        },
//        legend: {
//            orient: 'horizontal',
//            top: 'bottom',
//            left: 'center',
//            data: ['第一类', '第二类'],
//            textStyle: {
//                color: '#fff'
//            },
//            selectedMode: 'multiple',
//        },
        bmap: {
//            center: [114.307802, 30.59029],
            center: [114.302409, 30.621175],
            zoom: 13,
            roam: true,
            mapStyle: {
                styleJson:[
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": {
                            "color": "#021019"
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#000000"
                        }
                    },
                    {
                        "featureType": "highway",
                        "elementType": "geometry.stroke",
                        "stylers": {
                            "color": "#147a92"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#000000"
                        }
                    },
                    {
                        "featureType": "arterial",
                        "elementType": "geometry.stroke",
                        "stylers": {
                            "color": "#0b3d51"
                        }
                    },
                    {
                        "featureType": "local",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#000000"
                        }
                    },
                    {
                        "featureType": "land",
                        "elementType": "all",
                        "stylers": {
                            "color": "#08304b"
                        }
                    },
                    {
                        "featureType": "railway",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#000000"
                        }
                    },
                    {
                        "featureType": "railway",
                        "elementType": "geometry.stroke",
                        "stylers": {
                            "color": "#08304b"
                        }
                    },
                    {
                        "featureType": "subway",
                        "elementType": "geometry",
                        "stylers": {
                            "lightness": -70
                        }
                    },
                    {
                        "featureType": "building",
                        "elementType": "geometry.fill",
                        "stylers": {
                            "color": "#000000"
                        }
                    },
                    {
                        "featureType": "all",
                        "elementType": "labels.text.fill",
                        "stylers": {
                            "color": "#857f7f"
                        }
                    },
                    {
                        "featureType": "all",
                        "elementType": "labels.text.stroke",
                        "stylers": {
                            "color": "#000000"
                        }
                    },
                    {
                        "featureType": "building",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#022338"
                        }
                    },
                    {
                        "featureType": "green",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#062032"
                        }
                    },
                    {
                        "featureType": "boundary",
                        "elementType": "all",
                        "stylers": {
                            "color": "#1e1c1c"
                        }
                    },
                    {
                        "featureType": "manmade",
                        "elementType": "geometry",
                        "stylers": {
                            "color": "#022338"
                        }
                    },
                    {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "all",
                        "elementType": "labels.icon",
                        "stylers": {
                            "visibility": "off"
                        }
                    },
                    {
                        "featureType": "all",
                        "elementType": "labels.text.fill",
                        "stylers": {
                            "color": "#2da0c6",
                            "visibility": "on"
                        }
                    }
                ]
            }
        },
        series: series
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

//    点击箭头
    $('.left-arrow,.right-arrow').off('click').on('click', function () {
//        11.27 strat
        $('.tankuang').fadeOut();
//        11.27 end


        if ($(this).hasClass('arrow-on')) {
            $(this).removeClass('arrow-on');
            $(this).addClass('arrow-off');
            $('.left-cont').animate({
                'left': '-5rem'
            });
            $('.left-arrow').animate({
                'left': '0'
            })
            $('.right-cont').animate({
                'right': '-5rem'
            });
            $('.right-arrow').animate({
                'right': '0'
            })
//            11.27start
            $('.arrow').css({
                'transform': 'rotate(0deg)'
            })
//            11.27end
        } else {
            $(this).addClass('arrow-on');
            $(this).removeClass('arrow-off');
            $('.left-cont').animate({
                'left': '0.3rem'
            });
            $('.left-arrow').animate({
                'left': '5.5rem'
            })
            $('.right-cont').animate({
                'right': '0.3rem'
            });
            $('.right-arrow').animate({
                'right': '5.5rem'
            })
            $('#main-cont').fadeIn();
            $('#other-cont').fadeOut();
//             11.27 start
            $('.arrow').css({
                'transform': 'rotate(180deg)'
            })
//            11.27 end
        }

    })


    myChart.on('click', function (params) {

        if ($('.left-arrow').hasClass('arrow-on')) {
            $('#main-cont').fadeOut();
            $('#other-cont').fadeIn();

            //            11.27start
            if ($('#other-cont').css('display') == 'none') {
                $('.arrow').css({
                    'transform': 'rotate(0deg)'
                })
            }
//            11.27end

        } else {
            $('.left-arrow,.right-arrow').addClass('arrow-on');
            $('.left-arrow,.right-arrow').removeClass('arrow-off');
            $('.left-cont').animate({
                'left': '0.3rem'
            });
            $('.left-arrow').animate({
                'left': '5.5rem'
            })
            $('.right-cont').animate({
                'right': '0.3rem'
            });
            $('.right-arrow').animate({
                'right': '5.5rem'
            })
            $('#main-cont').fadeOut();
            $('#other-cont').fadeIn();

            //             11.27 start
            $('.arrow').css({
                'transform': 'rotate(180deg)'
            })
//            11.27 end

//            ulclick()
        }
        ;


//        11.27 start
        $(".tankuang").css({
            'display': 'block',
            "left": params.event.offsetX,
            'top': params.event.offsetY - parseInt(100)
        });
        $('.tankuang .name').html(params.name)
//        11.27 end


//    重新渲染图标
        myChart.clear();
        myChart.setOption(option, true);


    });

    $('.tankuang .close').off().on('click', function () {
        $('.tankuang').fadeOut();
    })



    var option1 = {
//        legend: {
//            icon:'rect',
//            orient : 'vertical',
//            x: 'right', // 'center' | 'left' | {number},
//
//            y: '8%', // 'center' | 'bottom' | {number}
//            data:['错误率','正确率'],
//            itemWidth: 15,
//            itemHeight: 10,
//            textStyle: {
//                color: ['#4aaff8'],
//                fontSize: 10,
//            }
//
//        },
        calculable : true,
        grid:{
            //---是否显示直角坐标系网格
            top:'10%',
//            right:'16%',//---相对位置，top\bottom\left\right
            bottom:'20%'
        },
        dataZoom : [
            {
                type: 'slider',
                show: true,
                xAxisIndex: [0],
                handleSize: 8,//滑动条的 左右2个滑动条的大小
                start: 0,                                //数据窗口范围的起始百分比,表示30%
                end: 20,
                height: 6,//组件高度
                top:'0%',
                left: 'center', //左边的距离
//                right: 40,//右边的距离
//                bottom: 30,//右边的距离
                handleColor: '#6edcdb',//h滑动图标的颜色
                handleStyle: {
                    borderColor: "#6edcdb",
                    borderWidth: "1",
                    shadowBlur: 2,
                    background: "#6edcdb",
                    shadowColor: "#6edcdb",
                },
                textStyle: {
                    fontSize: 14,
                    color: '#6edcdb'
                },
                fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                    //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                    //给第一个设置0，第四个设置1，就是垂直渐变
                    offset: 0,
                    color: '#1eb5e5'
                }, {
                    offset: 1,
                    color: '#5ccbb1'
                }]),
                backgroundColor: '#0c2c4d',//两边未选中的滑动条区域的颜色
                showDataShadow: false,//是否显示数据阴影 默认auto
                showDetail: true,//即拖拽时候是否显示详细数值信息 默认true
                handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                filterMode: 'filter',
            },
            //下面这个属性是里面拖到
            {
                type: 'inside',
                show: true,
                xAxisIndex: [0],
                start: 1,
                end: 100
            }
        ],
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['2018-10-1','2018-10-2','2018-10-3','2018-10-4','2018-10-5','2018-10-6','2018-10-7','2018-10-8','2018-10-9','2018-10-10'],
                axisLine:{                  //---坐标轴 轴线
                    show:true,                  //---是否显示
                    //------------------- 线 -------------------------
                    lineStyle:{
                        color:'rgba(255,255,255,0.5)',
                        width:1,
                        type:'solid',
                    },
                },
                axisTick: {
                    show: false
                },
                axisLabel:{                 //---坐标轴 标签
                    show:true,                  //---是否显示
                    inside:false,               //---是否朝内
                    rotate:0,                   //---旋转角度
                    margin: 5,                  //---刻度标签与轴线之间的距离
                    color:'rgba(255,255,255,0.5)',              //---默认取轴线的颜色
                },
                splitLine:{                 //---grid 区域中的分隔线
                    show:false,                 //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
                    lineStyle:{
                        //color:'red',
                        //width:1,
                        //type:'solid',
                    },
                },
                splitArea:{                 //--网格区域
                    show:false,                 //---是否显示，默认false
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLine:{                  //---坐标轴 轴线
                    show:true,                  //---是否显示

//                    //------------------- 箭头 -------------------------
//                    symbol:['none', 'arrow'],   //---是否显示轴线箭头
//                    symbolSize:[8, 8] ,         //---箭头大小
//                    symbolOffset:[0,7],         //---箭头位置

                    //------------------- 线 -------------------------
                    lineStyle:{
                        color:'rgba(255,255,255,0.5)',
                        width:1,
                        type:'solid',
                    },
                },
                axisTick: {
                    show: false
                },
                axisLabel:{                 //---坐标轴 标签
                    show:true,                  //---是否显示
                    inside:false,               //---是否朝内
                    rotate:0,                   //---旋转角度
                    margin: 5,                  //---刻度标签与轴线之间的距离
                    color:'rgba(255,255,255,0.5)',           //---默认取轴线的颜色
                },
                splitLine:{                 //---grid 区域中的分隔线
                    show:false,                 //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的
                    lineStyle:{
                        //color:'red',
                        //width:1,
                        //type:'solid',
                    },
                },
                splitArea:{                 //--网格区域
                    show:false,                 //---是否显示，默认false
                }
            }
        ],
        series : [
            {
                name:'',
                type:'line',
                smooth:true,
                symbol:null,//拐点样式
                symbolSize: 1,//拐点大小
                itemStyle: {
                    normal: {
                        color:'#67e6bd',
                        areaStyle:{
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {offset: 0, color: '#70f8ca'},
                                    {offset: 0.5, color: '#2f7b97'},
                                    {offset: 1, color: '#174878'}
                                ])
                        }
                    }
                },
                data:[80, 12, 21, 54, 260, 70,80, 12, 21, 54]
            },
        ]
    };
})
